<template>
  <el-row :gutter="10">
    <el-col>
      <el-card class="layout-query">
        <el-form ref="queryRef" :inline="true" :model="state.queryForm">
          <el-form-item label="" prop="velocity">
            <el-date-picker
              v-model="time"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-value="time"
              :shortcuts="shortcuts"
              @change="getTime" />
          </el-form-item>
          <!--          <el-form-item label="选择设备" prop="velocity">-->
          <!--            <el-select-->
          <!--                v-model="state.queryForm.currenWaybill"-->
          <!--                multiple-->
          <!--                clearable-->
          <!--                collapse-tags-->
          <!--                placeholder="Select"-->
          <!--                popper-class="custom-header"-->
          <!--                :max-collapse-tags="1"-->
          <!--                style="width: 240px"-->
          <!--            >-->
          <!--              <template #header>-->
          <!--                <el-checkbox-->
          <!--                    v-model="checkAll"-->
          <!--                    :indeterminate="indeterminate"-->
          <!--                    @change="handleCheckAll"-->
          <!--                >-->
          <!--                  所有设备-->
          <!--                </el-checkbox>-->
          <!--              </template>-->
          <!--              <el-option v-for="item in DeviceList" :key="item.value" :label="item.label" :value="item.value">-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="最小速度" prop="velocity">-->
          <!--            <el-select v-model="state.queryForm.velocity" placeholder="请选择" size="default" style="width: 240px">-->
          <!--              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getDirectivesList()">查询</el-button>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>-->
          <!--          </el-form-item>-->
        </el-form>
      </el-card>
      <el-card>
        <!--        <el-space>-->
        <!--          <el-button v-auth="`statistics:trip_statistics:download`" plain icon="Download" @click="downloadExcel()"-->
        <!--            >导出</el-button-->
        <!--          >-->
        <!--        </el-space>-->
        <!--        </el-space>-->
        <el-table v-loading="dataListLoading" :data="data" border class="layout-table">
          <el-table-column type="selection" header-align="center" align="center" width="50" />
          <el-table-column prop="imei" label="设备名称" header-align="center" align="center" />
          <el-table-column prop="imei" label="设备序号" dict-type="processing_status"></el-table-column>
          <el-table-column prop="commandBody.attributes.name" label="命令名称" dict-type="alarm_type"></el-table-column>
          <el-table-column prop="feedbackTime" label="发送时间" dict-type="order_status"></el-table-column>
          <el-table-column prop="content" label="发送内容" header-align="center" align="center" show-overflow-tooltip />
          <el-table-column prop="executor" label="发送者" header-align="center" align="center" />
          <el-table-column prop="executorPhone" label="来源" header-align="center" align="center" />
          <el-table-column prop="occurNum" label="ip" header-align="center" align="center" />
          <el-table-column prop="feedbackResult" label="发送结果" header-align="center" align="center" />
        </el-table>
        <el-pagination
            :current-page="page"
            :page-sizes="state.pageSizes"
            :page-size="size"
            :total="total"
            layout="total, sizes, prev, pager, next"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle">
        </el-pagination>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, watch } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import OrgTree from '@/views/sys/user/org-tree.vue'
import Detail from '@/views/biz/waybill/detail.vue'
import { useRouter } from 'vue-router'
import MaDictColumn from '@/components/ma-dict/ma-dict-column/index.vue'

import { CheckboxValueType, ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment'
import { useDeviceListApi } from '@/api/gps/device'
import { getdirectivesListApi } from '@/api/statistics/directives'
const queryRef = ref()
const total = ref()
const page = ref(1)
const size = ref(10)
const state: IHooksOptions = reactive({
  // newParams: true,
  // deleteUrl: '/biz/waybill',
  // responseInterceptor: (data) => {
  //   data?.forEach((value, index) => {
  //     data[index].haveAlarm = value.haveAlarm.toString()
  //   })
  //   return data
  // },
  queryForm: {
    startTime: `${moment().format('YYYY-MM-DD')} 00:00:00`,
    endTime: `${moment().format('YYYY-MM-DD')} 23:59:59`,
    papageSize: 10,
    pageNum: 1
  }
})
// const downloadExcel = () => {
//   downloadHandle('/biz/car/exportall').then(() => {
//     ElMessage.success({
//       message: '操作成功',
//       duration: 500
//     })
//   })
// }
// const mineList = ref<any[]>([])
const time = ref([state.queryForm.startTime, state.queryForm.endTime])
const DeviceList = ref([])
const checkAll = ref(false)
const indeterminate = ref(false)
const dataListLoading = ref(false)
const data = ref([])
function useDeviceList() {
  useDeviceListApi({
    orderField: 'signal_update_time',
    onlyVideo: false,
    order: 'DESC',
    pageNum: 1,
    pageSize: 1000,
    keyWords: ''
  }).then((res) => {
    DeviceList.value = res.data.list.map((res) => {
      return {
        value: res.imei,
        label: res.imei + '  ' + res.subTitle
      }
    })
  })
}
useDeviceList()

watch(state.queryForm.currenWaybill, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === DeviceList.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})
function getDirectivesList() {
  data.value = []
  getdirectivesListApi(state.queryForm).then((res) => {
    dataListLoading.value = false
     total.value =res.data.list.totalCount
    res.data.list.forEach((res) => {
      res.content = res.commandBody
      res.attribute = JSON.parse(res.attribute)
      res.commandBody = JSON.parse(res.commandBody)
      data.value.push(res)
    })

  })
}
getDirectivesList()
const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    state.queryForm.currenWaybill = DeviceList.value.map((_) => _.value)
  } else {
    state.queryForm.currenWaybill = []
  }
}

function getTime(e) {
  if (e === null) {
    state.queryForm.endTime = ''
    state.queryForm.startTime = ''
  } else {
    if (e[0] === e[1]) {
      state.queryForm.startTime = e[0]
      const a = e[1].split(' ')
      state.queryForm.endTime = a[0] + ' 23:59:59'
      return
    }
    state.queryForm.startTime = e[0]
    state.queryForm.endTime = e[1]
  }
}

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    }
  }
]

const sizeChangeHandle = (val: number) => {
  page.value = 1
  size.value = val
  getDirectivesList()
}
const currentChangeHandle = (val: number) => {
  page.value = val
  getDirectivesList()
}
const { getDataList, selectionChangeHandle, deleteBatchHandle, reset, downloadHandle } = useCrud(state)
</script>
<style>
.hide {
  width: 200px;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
